<template>
  <div>
    <div class="conditionRow">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="名称" prop="shopName">
         <el-input
           v-model="queryParams.shopName"
           placeholder="请输入名称"
           clearable
           @keyup.enter.native="handleQuery"
           @change="handleQuery"
         />
       </el-form-item>
       <el-form-item label="姓名" prop="merchantName">
         <el-input
           v-model="queryParams.merchantName"
           placeholder="请输入姓名"
           clearable
           @keyup.enter.native="handleQuery"
           @change="handleQuery"
         />
       </el-form-item>
       <el-form-item label="手机号" prop="phone">
         <el-input
           v-model="queryParams.phone"
           placeholder="请输入手机号"
           clearable
           @keyup.enter.native="handleQuery"
           @change="handleQuery"
         />
       </el-form-item>
       <el-form-item label="注册时间">
         <el-date-picker
           v-model="dateRange"
           style="width: 240px"
           value-format="yyyy-MM-dd"
           type="daterange"
           range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           @change="timeChange"
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         <el-button icon="el-icon-plus" size="mini" @click="addmerchant">新建</el-button>
       </el-form-item>
     </el-form>
    </div>
    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%;"
    >
      <el-table-column label="名称" align="center" prop="shopName" :show-overflow-tooltip="true" />
      <el-table-column label="姓名" align="center" prop="merchantName" :show-overflow-tooltip="true" />
      <el-table-column label="手机号" align="center" prop="phone" :show-overflow-tooltip="true" />
      <el-table-column label="积分" align="center" prop="integral" :show-overflow-tooltip="true" />
      <el-table-column label="类型" align="center" prop="type" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          {{scope.row.type==1?'回收分类':scope.row.type==2?'家政分类':scope.row.type==3?'工厂分类':''}}
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="center" prop="createdTime" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" width="500" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            @click="addIntegral(scope.row)"
            v-hasPermi="['monitor:online:forceLogout']"
          >积分</el-button>
          <el-button
            type="primary"
            plain
            @click="handleForceLogout(scope.row)"
            v-hasPermi="['monitor:online:forceLogout']"
          >编辑</el-button>
          <el-button
            type="primary"
            plain
            @click="qrForceLogout(scope.row)"
            v-hasPermi="['monitor:online:forceLogout']"
          >小程序码</el-button>
          <el-button
            :type="scope.row.status==1?'danger':'primary'"
            plain
            @click="changeStatusClick(scope.row)"
            v-hasPermi="['monitor:online:forceLogout']"
          >{{scope.row.status==1?'冻结':'解封'}}</el-button>
          <el-button
            type="danger"
            plain
            @click="handleForceLogout(scope.row)"
            v-hasPermi="['monitor:online:forceLogout']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize"
      layout="total, prev, pager, next,sizes,jumper"
      @pagination="getList"
    />
    <!-- 添加或修改对话框 -->
    <el-dialog :title="synthesform.id?'编辑综合站':'新建综合站'" :visible.sync="openDetail" width="650px" append-to-body >
        <div class="synthesizebox">
            <el-form ref="form" :model="synthesform" label-width="120px">
              <el-form-item label="综合站名称">
                <el-input v-model="synthesform.shopName"></el-input>
              </el-form-item>
              <el-form-item label="站长姓名">
                <el-input v-model="synthesform.merchantName"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="synthesform.phone"></el-input>
              </el-form-item>
              <el-form-item label="账号">
                <el-input v-model="synthesform.merchantNumber"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="synthesform.merchantPassword"></el-input>
              </el-form-item>
              <el-form-item label="类型">
                <el-radio-group v-model="synthesform.type">
                  <el-radio label="1">回收分类</el-radio>
                  <el-radio label="2">家政分类</el-radio>
                  <el-radio label="3">工厂分类</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="证件资料">
                <div class="uploaderrow">
                  <div class="lump" data-type="1" @click.stop="avatarUploader">
                      <el-upload
                        class="avatar-uploader"
                        action="http://recycleplat.jiyar.net/recycle/ruoyi-recycle/universal/exportImport"
                        accept="image/jpeg,image/jpg,image/png"
                        :limit="1"
                        :show-file-list="false"
                        list-type="picture-card"
                        :headers="headerObj"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <el-tooltip  v-if="synthesform.merchantBusinessLicense" class="item" effect="dark" content="营业执照" placement="top">
                          <img :src="synthesform.merchantBusinessLicense" class="avatar">
                        </el-tooltip>
                        <span v-else>营业执照</span>
                      </el-upload>
                  </div>
                  <div class="lump" data-type="2" @click.stop="avatarUploader">
                      <el-upload
                        class="avatar-uploader"
                        action="http://recycleplat.jiyar.net/recycle/ruoyi-recycle/universal/exportImport"
                        accept="image/jpeg,image/jpg,image/png"
                        :limit="1"
                        :show-file-list="false"
                        list-type="picture-card"
                        :headers="headerObj"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <el-tooltip  v-if="synthesform.merchantIdentityCardFront" class="item" effect="dark" content="身份证正面" placement="top">
                          <img :src="synthesform.merchantIdentityCardFront" class="avatar">
                        </el-tooltip>
                        <span v-else>身份证正面</span>
                      </el-upload>
                  </div>
                  <div class="lump" data-type="3" @click.stop="avatarUploader">
                      <el-upload
                        class="avatar-uploader"
                        action="http://recycleplat.jiyar.net/recycle/ruoyi-recycle/universal/exportImport"
                        accept="image/jpeg,image/jpg,image/png"
                        :limit="1"
                        :show-file-list="false"
                        list-type="picture-card"
                        :headers="headerObj"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <el-tooltip  v-if="synthesform.merchantIdentityCardReverse" class="item" effect="dark" content="身份证背面" placement="top">
                          <img :src="synthesform.merchantIdentityCardReverse" class="avatar">
                        </el-tooltip>
                        <span v-else>身份证背面</span>
                      </el-upload>
                  </div>
                  <div class="lump" data-type="4" @click.stop="avatarUploader">
                      <el-upload
                        class="avatar-uploader"
                        action="http://recycleplat.jiyar.net/recycle/ruoyi-recycle/universal/exportImport"
                        accept="image/jpeg,image/jpg,image/png"
                        list-type="picture-card"
                        :headers="headerObj"
                        :file-list="merchantImgList"
                        :on-success="handleAvatarSuccess"
                        :on-remove="handleRemove"
                        :before-upload="beforeAvatarUpload">
                          <span v-if="!merchantImgList.length">其他资质</span>
                          <i v-else class="el-icon-plus"></i>
                      </el-upload>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button>取消</el-button>
                <el-button type="primary" @click="onSubmit">保存</el-button>
              </el-form-item>
            </el-form>
        </div>
    </el-dialog>

    <el-dialog
      title="添加积分"
      :visible.sync="integralPopShow"
      width="350px"
      class="integralPop"
      center>
      <div class="integralIpt">
        <span>积分</span>
        <el-input type="number" v-model="integralnum" placeholder="请输入"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="integralPopShow = false">取 消</el-button>
        <el-button type="primary" @click="integralSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="小程序码"
      :visible.sync="qrPopShow"
      width="350px"
      center>
      <div class="xcximgbox">
        <!-- xcxqrimg -->
          <div class="img" id="printArea">
            <img src="@/assets/images/ind_1.png" width="100%">
          </div>

          <span class="btn" v-print="'#printArea'">打印</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listMerchant, getMerchantDetail ,addSaveIntegral,getMiniProgram, changeStatus, changeMerchant, addMerchantFun } from "@/api/user/merchant";
  import { getToken } from '@/utils/auth'
  export default {
      data(){
        return{
          // 显示搜索条件
          showSearch: true,
          // 查询参数
          queryParams: {
            currentPage: 1,
            pageSize: 10,
            shopName: null,
            merchantName: null,
            phone: null,
            searchTimeBegin: null,
            searchTimeEnd: null
          },
          // 日期范围
          dateRange: [],
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // 表格数据
          list: [],
          currentPage: 1,
          pageSize: 10,
          openDetail:false,
          synthesform:{
            shopName:null,
            merchantName:null,
            phone:null,
            merchantNumber	:null,
            merchantPassword:null,
            type:"1",
            merchantBusinessLicense:'', //证件资料-营业执照
            merchantIdentityCardFront:'', //证件资料-身份证正面
            merchantIdentityCardReverse:'', //证件资料-身份证反面
          },
          merchantImgList:[],
          integralPopShow:false,
          integralnum:null,
          integralPopid:null,
          qrPopShow:false,
          xcxqrimg:'',
          headerObj: { Authorization: null },
          uploadLoading:null,
          formimgnum:0
        }
      },
      created() {
        this.headerObj.Authorization='Bearer '+getToken()
        this.getList();
      },
      methods:{
        //新建综合站
        addmerchant(){
          this.merchantImgList=[]
          this.synthesform={
            shopName:null,
            merchantName:null,
            phone:null,
            merchantNumber	:null,
            merchantPassword:null,
            type:"1",
            merchantBusinessLicense:'', //证件资料-营业执照
            merchantIdentityCardFront:'', //证件资料-身份证正面
            merchantIdentityCardReverse:'' //证件资料-身份证反面
          }
          this.openDetail=true
        },
        avatarUploader(e){
          this.formimgnum=e.currentTarget.dataset.type
        },
        //冻结/解封
        changeStatusClick(data){
          this.$confirm('是否将'+data.shopName+'账号'+(data.status==1?'冻结？':'解封？'), '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            let queryParams={
              id:data.id,
              status:data.status==1?0:1
            }
            changeMerchant(queryParams).then(response => {
              this.$message({
                type: 'success',
                message: queryParams.status==1?'解封成功':'冻结成功'
              });
              setTimeout(()=>{
                this.getList()
              },1500)
            });
          }).catch(() => {});
      },
        //添加积分
        addIntegral(data){
          this.integralPopid=data.id
          this.integralnum=null
          this.integralPopShow=true
        },
        integralSubmit(){
          let data={
            id:this.integralPopid,
            integral:this.integralnum
          }
          if(!data.integral){
            this.$message({
              message: "请输入积分",
              type: 'error'
            })
            return
          }
          addSaveIntegral(data).then(response=>{
             this.integralPopShow=false
             this.$message({
               message: "添加成功",
               type: 'success'
             })
             setTimeout(()=>{
               this.getList()
             },1500)
          })
        },
        onSubmit() {
          for(let i in this.synthesform){
            if(!this.synthesform[i]){
              if(i=='shopName'){
                this.$message({
                  message: "请输入综合站名称",
                  type: 'error'
                })
                return
              }else if(i=='merchantName'){
                this.$message({
                  message: "请输入站长姓名",
                  type: 'error'
                })
                return
              }else if(i=='phone'){
                this.$message({
                  message: "请输入手机号",
                  type: 'error'
                })
                return
              }else if(i=='merchantNumber'){
                this.$message({
                  message: "请输入账号",
                  type: 'error'
                })
                return
              }else if(i=='merchantPassword'){
                this.$message({
                  message: "请输入密码",
                  type: 'error'
                })
                return
              }else if(i=='merchantBusinessLicense'){
                this.$message({
                  message: "请上传营业执照",
                  type: 'error'
                })
                return
              }else if(i=='merchantIdentityCardFront'){
                this.$message({
                  message: "请上传身份证正面",
                  type: 'error'
                })
                return
              }else if(i=='merchantIdentityCardReverse'){
                this.$message({
                  message: "请上传身份证反面",
                  type: 'error'
                })
                return
              }
            }
          }
          let merchantImg=[]
          for(let i in this.merchantImgList){
            merchantImg.push(this.merchantImgList[i].url)
          }
          this.synthesform.merchantImg=merchantImg.join(",")
          if(this.synthesform.id){
            changeMerchant(this.synthesform).then(res=>{
              this.$message({
                message: "修改成功",
                type: 'success'
              })
              this.openDetail=false
              setTimeout(()=>{
                this.getList()
              },1500)
            })
          }else{
            addMerchantFun(this.synthesform).then(res=>{
              this.$message({
                message: "添加成功",
                type: 'success'
              })
              this.openDetail=false
              setTimeout(()=>{
                this.getList()
              },1500)
            })
          }
        },
        handleAvatarSuccess(res, file) {
          // this.imageUrl = URL.createObjectURL(file.raw);
          if(this.formimgnum==1){
            this.synthesform.merchantBusinessLicense = res.data;
          }else if(this.formimgnum==2){
            this.synthesform.merchantIdentityCardFront = res.data;
          }else if(this.formimgnum==3){
            this.synthesform.merchantIdentityCardReverse = res.data;
          }else if(this.formimgnum==4){
            this.merchantImgList.push({
              name:file.name,
              url:res.data
            })
          }
          this.uploadLoading.close();
        },
        handleRemove(file){
          console.log(file)
          for(let i in this.merchantImgList){
            if(this.merchantImgList[i].url==file.url){
              this.merchantImgList.splice(i,1)
            }
          }
        },
        beforeAvatarUpload(file) {
          // const isJPG = file.type === 'image/jpeg';
          // const isLt2M = file.size / 1024 / 1024 < 2;
          // if (!isJPG) {
          //   this.$message.error('上传图片只能是 JPG 格式!');
          // }
          // if (!isLt2M) {
          //   this.$message.error('上传图片大小不能超过 2MB!');
          // }
         this.uploadLoading = this.$loading({
            lock: true,
            text: '上传中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          // return isJPG && isLt2M;
        },
        timeChange(time){
          if(time){
            this.queryParams.searchTimeBegin=time[0]
            this.queryParams.searchTimeEnd=time[1]
          }else{
            this.queryParams.searchTimeBegin=null
            this.queryParams.searchTimeEnd=null
          }
          this.handleQuery()
        },
        /** 查询列表 */
        getList() {
          this.loading = true;
          for(let i in this.queryParams){
            if(!this.queryParams[i]) this.queryParams[i]=null
          }
          listMerchant(this.queryParams).then(response => {
            this.list = response.records;
            this.total = response.total;
            this.loading = false;
          });
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.currentPage = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.queryParams.searchTimeBegin=''
          this.queryParams.searchTimeEnd=''
          this.dateRange=[]
          this.handleQuery();
        },
        handleForceLogout(data){
          getMerchantDetail(data.id).then(response=>{
             this.synthesform=response.data
             this.merchantImgList=[]
             if(this.synthesform.merchantImg){
               let merchantImg=this.synthesform.merchantImg.split(",")
               for(let i=0;i<merchantImg.length;i++){
                 this.merchantImgList.push({
                   name:i,
                   url:merchantImg[i]
                 })
               }
             }
             this.openDetail=true
          })
        },
        qrForceLogout(data){
          getMiniProgram({id:data.id}).then(response=>{
             this.xcxqrimg=response.data
             this.qrPopShow=true
          })
        }
    }
  }
</script>

<style lang="scss" scoped>
  @media print {
    @page{
        size:  auto;
        margin: 3mm;
    }
  }
  .integralPop{
    .integralIpt{
      display: flex;
      justify-content: center;
      align-items: center;
      .el-input{
        width: 200px;
        margin-left: 10px;
      }
    }
  }
  .synthesizebox{
    .avatar{
      width: 148px;
      height: 148px;
    }
    .uploaderrow{
      display: flex;
      flex-wrap: wrap;
      .lump{
        margin-right: 8px;
        margin-bottom: 10px;
      }
    }
  }
  .xcximgbox{
    display: flex;
    flex-direction: column;
    align-items: center;
    .img{
      width: 160px;
      height: 160px;
    }
    .btn{
      font-size: 16px;
      color: #333;
      margin-top: 20px;
      cursor: pointer;
    }
  }
</style>
